<style>
    .mailModal {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<template>
    <div>
        <ApplyListTemplate applyListClass="discountMain" v-if="modalType === 0">
            <template slot="applyQueryForm">
                <Form ref="searchForm" :model="searchForm" inline :label-width="120" class="search-form rui-query-form">
                    <div class="applyQuerySearchRow">
                        <div class="applyQueryHead"></div>
                        <div class="applyQuerySearchItem">
                            <FormItem prop="dateRange">
                                <div>
                                    <DatePicker
                                        type="daterange"
                                        v-model="searchForm.dateRange"
                                        @on-change="handleSearch"
                                        clearable
                                        format="yyyy-MM-dd"
                                        placeholder="合同激活起止时间"
                                        prefix="ios-search"
                                    ></DatePicker>
                                </div>
                            </FormItem>
                        </div>
                    </div>
                </Form>
            </template>
            <template slot="applyQueryTable">
                <Table :loading="loading" :columns="columns" :data="data" sortable="custom" ref="table">
                    <template slot-scope="{ row, index }" slot="action">
                        <div class="btn-no-border">
                            <Button ghost style="margin-right:5px" type="primary" size="small" @click="show(row)">查看</Button>
                            <Button ghost style="margin-right:5px" type="primary" size="small"
                                     @click="determine(row)">确认
                            </Button>
                        </div>
                    </template>
                </Table>
            </template>
            <template slot="applyQueryPage">
                <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                      @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                      size="small" show-total show-elevator show-sizer></Page>
            </template>
        </ApplyListTemplate>

        <Row v-if="this.modalType == 1">
            <Col>
                <Card>
                    <Row>
                        <Form  inline :label-width="120" style="border-bottom: 1px black solid">
                            <span style="font-size: 16px">查看贴息明细</span>
                            <Button @click="backPage" size="small" type="primary" style="float: right">返回</Button>
                        </Form>
                        <Form ref="loanDetailsForm" :model="loanDetailsForm" :label-width="160" style="margin-top: 5px">
                            <Row>

                                <i-col span="8">
                                    <span>{{loanDetailsForm.title}}</span>
                                </i-col>
                                <i-col span="8">
                                    <Button @ size="small" type="primary" style="text-align: center" @click="exportFile(row)">导出</Button>
                                </i-col>
                            </Row>
                            <Row style="margin-top: 10px">
                                <i-col span="8">
                                    合同激活：
                                    <span>{{loanDetailsForm.startdate}}</span>至<span>{{loanDetailsForm.enddate}}</span>
                                </i-col>
                                <i-col span="8">
                                    合同数量：
                                    <span>{{loanDetailsForm.contractnum}}</span>
                                </i-col>
                            </Row>
                            <Row style="margin-top: 15px">

                                <i-col span="8">
                                    销售公司贴息总额：
                                    <span>{{loanDetailsForm.xsmoney}}</span>
                                </i-col>
                                <i-col span="8">
                                    经销商贴息总额：
                                    <span>{{loanDetailsForm.jxsmoney}}</span>
                                </i-col>
                                <i-col span="8">
                                    贴息总金额：
                                    <span>{{loanDetailsForm.allmoney}}</span>
                                </i-col>
                            </Row>
                        </Form>
                        <Row style="margin-top: 5px">
                            <Table :loading="loading" border :columns="columnsList" :data="dataList" sortable="custom" ref="table">
                            </Table>
                        </Row>
                        <Row type="flex" justify="end" class="page">
                            <Page :current="columnsFrom.pageNumber" :total="columnstotal"  :page-size="columnsFrom.pageSize"
                                  @on-change="changeColumnsPage" @on-page-size-change="changeColumnsPageSize" :page-size-opts="[10,20,50]"
                                  size="small" show-total show-elevator show-sizer></Page>
                        </Row>

                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal :title="modalTitle" v-model="deterModalVisible" :mask-closable='false' :width="400"
               class="mailModal">
            <Form  :label-width="80">
                <FormItem>
                <div class="upload fl">
                    <div class="upimg">
                        <input type="file" name="file1" @change="uploadImg" ref="uploadInput">
                        选取文件
                    </div>
                </div>
                </FormItem>
                <FormItem>
                    <Button type="warning" @click="printing">打印</Button>
                    <Button type="primary" @click="determineCheck">确认(须有回执附件)</Button>
                </FormItem>
            </Form>

            <div slot="footer">

            </div>
        </Modal>
    </div>
</template>
<script>
    import {
        getList,
        getDiscountInfo,
        getDiscountList,
        uploadFile
    } from "../../api/discount-main/discountMain";
    import ApplyListTemplate from "_p/afs-apply/pages/common/ApplyListTemplate";

    export default {
        name: "rebateReturn",
        components: { ApplyListTemplate },
        data() {
            return {
                drop: false,
                dropDownContent: "更多",
                dropDownIcon: "ios-arrow-down",
                loading: false,
                submitLoading: false,
                mailModalVisible: false,
                deterModalVisible: false,
                total: 0,
                modalType:0,
                columnstotal:0,
                modalTitle: "",
                searchForm: {
                    pageNumber: 1,
                    pageSize: 10,
                    startDate:'',
                    endDate:'',
                    dateRange:[]
                },
                columnsFrom:{
                    pageNumber: 1,
                    pageSize: 10,
                },
                loanDetailsForm:{
                    startdate:'',
                    enddate:'',
                    title:'',
                    allmoney:'',
                    jxsmoney:'',
                    contractnum:'',
                    xsmoney:''
                },
                columns: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 80,
                        align: 'center',
                        ellipsis: true,
                        tooltip: true,
                    }, {
                        title: "贴息名称",
                        key: "title",
                        align: "center",
                        minWidth: 200,
                    },
                    {
                        title: "合同激活开始日期",
                        key: "startdate",
                        align: "center",
                        minWidth: 140
                    },
                    {
                        title: "合同激活截止日期",
                        key: "enddate",
                        align: "center",
                        minWidth: 140,
                    },
                    {
                        title: "下发时间",
                        key: "realeaseddate",
                        align: "center",
                        minWidth: 160,
                    },
                    {
                        title: "贴息总金额",
                        key: "allmoney",
                        align: "center",
                        minWidth: 100,
                    },
                    {
                        title: "经销商名称",
                        key: "dealer",
                        align: "center",
                        minWidth: 200,
                    },
                    {
                        title: "操作",
                        key: "action",
                        minWidth: 140,
                        align: "center",
                        fixed: "right",
                        slot: "action"
                    }
                ],
                data: [],
                columnsList:[
                    {
                        title: "申请号",
                        key: "applycode",
                        align: "center",
                        minWidth: 140,
                    },
                    {
                        title: "客户姓名",
                        key: "customer",
                        align: "center",
                        minWidth: 140,
                    },
                    {
                        title: "车型",
                        key: "model",
                        align: "center",
                        minWidth: 140,
                    },
                    {
                        title: "车架号",
                        key: "vin",
                        align: "center",
                        minWidth: 160,
                    },
                    {
                        title: "贷款期数",
                        key: "term",
                        align: "center",
                        minWidth: 100,
                    },{
                        title: "贴息总额",
                        key: "allmoney",
                        align: "center",
                        minWidth: 100,
                    },
                    {
                        title: "销售公司贴息额",
                        key: "xsmoney",
                        align: "center",
                        minWidth: 100,
                    },
                    {
                        title: "经销商贴息额",
                        key: "jxsmoney",
                        align: "center",
                        minWidth: 140,
                    },
                    {
                        title: "天津金融公司开票额",
                        key: "tjmoney",
                        align: "center",
                        minWidth: 140,
                    },
                    {
                        title: "上海银行开票额",
                        key: "shmoney",
                        align: "center",
                        minWidth: 140,
                    },
                ],
                dataList:[],
            }
        },
        methods: {
            //查询按钮操作
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                let d = this.searchForm.dateRange
                this.searchForm.startDate = d && d[0] ? d[0] : '';
                this.searchForm.endDate= d && d[1] ? d[1] : '';
                this.queryData();
            },
            //多条件分页查询
            queryData(pageNumber = 1, pageSize = 10) {
                if(this.searchForm.startDate>this.searchForm.endDate){
                    this.$Message.error("时间范围错误");
                }else {
                    let params = {
                        page: pageNumber,
                        pagesize: pageSize,
                        startDate: this.searchForm.startDate,
                        endDate: this.searchForm.endDate
                    };
                    getList(params).then(res => {
                        if (res.code === "0000") {
                            this.data = res.data.records;
                            this.total = res.data.total;
                        }
                    });
                }
            },
            show(row){
                this.modalType=1;
                this.id=row.id;
                let param={id:this.id};
                getDiscountInfo(param).then(res => {
                    this.operationLoading = false;
                    if (res.code === "0000") {
                        this.loanDetailsForm=res.data.data;
                    }
                });
                this.queryDetail();
            },
            queryDetail(pagenumber = 1, pagesize = 10){
                let params = {
                    page: pagenumber,
                    pagesize: pagesize,
                    id: this.id
                };
                getDiscountList(params).then(res => {
                    this.operationLoading = false;
                    if (res.code === "0000") {
                        this.dataList = res.data.records;
                        this.columnstotal = res.data.total;
                    }
                });
            },
            determine(row){
                this.modalTitle="确认信息";
                this.deterModalVisible=true;
            },
            backPage(){
                this.modalType=0;
                this.columnsFrom.pageSize = 10;
            },
            printing(){
                alert("打印");
            },
            determineCheck(){
                alert("确认上传回执");
            },
            exportFile(){
                alert("导出");
            },
            //改变当前页码
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.queryData(v, this.searchForm.pageSize);
            },
            //改变页码数量
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.queryData(this.searchForm.pageNumber, v);
            },
            changeColumnsPage(v) {
                this.columnsFrom.pageNumber = v;
                this.queryDetail(v,this.columnsFrom.pageSize);
            },
            //改变页码数量
            changeColumnsPageSize(v) {
                this.columnsFrom.pageSize = v;
                this.queryDetail(this.columnsFrom.pageNumber,v);
            },
            //重置表单数据,并重新加载数据
            handleReset() {
                //this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.searchForm.startDate = "";
                this.searchForm.endDate = "";
                this.queryData();
            },
            dropDown() {
                if (this.drop) {
                    this.dropDownContent = "更多";
                    this.dropDownIcon = "ios-arrow-down";
                } else {
                    this.dropDownContent = "收起";
                    this.dropDownIcon = "ios-arrow-up";
                }
                this.drop = !this.drop;
            },
            //上传附件
            uploadImg() {
                let files = this.$refs.uploadInput.files;
                let AllUpExt = ".jpg|.bmp|.jpeg|.png|.gif|";
                let extName = files[0].name.substring(files[0].name.lastIndexOf(".")).toLowerCase();
                if (AllUpExt.indexOf(extName + "|") == "-1") {
                    this.$Message.warning("文件格式不正确！");
                    return;
                }

                let size = files[0].size;
                size = size / (1024 * 1024);
                console.log(size)
                if (size > 10) {  // 10M
                    this.$Message.warning("文件过大");
                    return;
                }

                let file = files[0];
                let formData = new FormData();//创建 formdata对象
                formData.append('file', file);
                uploadFile(formData).then(res => {
                    this.$Message.success("上传成功");
                    this.modifyDocInfo('part')
                });

            },
        },
        mounted() {
            this.handleSearch();
        }
    }
</script>
<style scoped>
    .upload {
        width: 100px;
        height: 100px;
        border: 1px dotted #ccc;
        position: relative;
    }

    .upimg {
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #EB9620;
        border-radius: 5px;
        color: #FFFFFF;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .upimg:hover {
        background: #EB9620;
        text-decoration: none;
    }

    .upimg input {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        top: 0;
        bottom: 0;
        height: 100%;
        filter: alpha(opacity=0);
        opacity: 0;
        cursor: pointer;
        overflow: hidden;
    }

    .showImg i {
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .showImg > li {
        width: 100px;
        height: 100px;
        position: relative;
        border: 1px dotted #ccc;
        margin-left: 10px;
    }

    .showImg > li img {
        width: 100%;
        height: 100%;
    }
</style>
